<!--自定义事件-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="one">
  <todo>
    <todo-head slot="todo-head" v-bind:title="head_content"></todo-head>
    <todo-content slot="todo-content" v-for="(item,index) in items_content"
                  v-bind:item="item" v-bind:index="index" v-on:remove_b="removeItem(index)"></todo-content>
  </todo>
</div>
<script>
  /*  创建一个组件
  <slot name="todo-head"></slot> 使用slot绑定其他组件
  */
  Vue.component('todo',{
    template:'<div>' +
            '<slot name="todo-head"></slot>' +
            '<ul>' +
            '<slot name="todo-content"></slot>' +
            '</ul>' +
            '</div>',
  });
  //创建一个组件
  Vue.component('todo-head',{
    props:['title'],
    template:'<div>{{title}}</div>',
  });
  //创建一个组件
  Vue.component('todo-content',{
    props:['item','index'],
    template:'<li>{{item}}{{index}}<button v-on:click="remove">删除</button></li>',
    methods:{
      remove:function (index) {
        //自定事件内部逻辑：使用事件A，事件A调用事件B，最终B调用C执行事件C
        this.$emit('remove_b',index);
      }
    }
  });
  var vm = new Vue({
    el:"#one",
    data:{
      head_content:'这是个列表',
      items_content:['A','B','C'],
    },
    methods: {
      removeItem:function (index) {
        this.items_content.splice(index,1);
      }
    }
  });
</script>
</body>
</html>